<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<style>
.row{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.confirmBtn{
	position:absolute;
	right: 5px;
	color: green;
}
td{
	font-size:10px;
	text-align: center;
}
th{
	font-size:13px;
	text-align: center;
}
.btn{
	margin-left: 5px;
	margin-right: 5px
}
</style>
<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins animated bounceInRight">
			<div class="ibox-title" style="border-bottom: none; background: #fff;">
				<h5>节点管理</h5>
			</div>
			<div style="position: fixed;right: 10px;top:10px"><button id="addFatherNode" title="添加父节点" class="btn btn-success btn-sm dim" type="button"><i class="fa fa-plus"></i></button></div>
			<div class="ibox-content" style="border-top: none;">
				<table id="fatherTable" class="table table-condensed table-hover table-bordered">
					<tr>
						<th>ID</th>
						<th>菜单图标</th>
						<th>节点名</th>
						<th>路径</th>
						<th>操作</th>
					</tr>
					<c:forEach  items="${nodes}" var="node">
					<tr>
						<td style="width: 10%">${node.id}</td>
						<td style="width: 10%"><i class="${node.icon}"></i></td>
						<td style="width: 30%">${node.node}</td>
						<td style="width: 30%">${node.path}</td>
						<td style="width: 20%"><a id="${node.id}" onclick="delNode(this)" class="btn btn-sm btn-danger btn-rounded">删除</a><a id="${node.id}" onclick="showChild(this)" class="btn btn-sm btn-success btn-rounded">查看子节点</a></td>
					</tr>
					</c:forEach>
				</table>
			</div>
		</div>
	</div>
	<div class="col-sm-12">
			<div class="ibox float-e-margins animated bounceInLeft">
			<div class="ibox-title" style="border-bottom: none; background: #fff;">
				<h5 id="fatherNodeName">未选择父节点</h5>
			</div>
			<div style="position: fixed;right: 10px;top:10px"><button title="添加子节点" id="addChildNode" class="btn btn-success btn-sm dim" type="button"><i class="fa fa-plus"></i></button></div>
			<div class="ibox-content" style="border-top: none;">
				<table id="childTable" class="table table-condensed table-hover table-bordered">
					
				</table>
			</div>
		</div>
	</div>
</div>
<!-- Bootstrap table -->
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Peity -->
<script src="<%=basePath%>js/demo/bootstrap-table-demo.js"></script>
<script type="text/javascript">
	/* 显示子节点 */
	function showChild(obj){
		var id = $(obj).attr('id');
		var tr = $(obj).parent().parent();
		var nodeName = $(tr).find('td:nth-child(3)').text();
		var html = '<tr><th>ID</th><th>菜单图标</th><th>节点名</th><th>路径</th><th>操作</th></tr>';
		$("#fatherNodeName").html("父节点名称："+nodeName+"(ID:"+id+")");
		$('#childTable').removeClass('animated fadeIn');
		$.ajax({
				url:'<%=basePath%>Node/getNodesByParentId',
				data : {
					'id' : id
				},
				dataType : 'json',
				success : function(data) {
				if (data.code == '200') {
					$(data.data).each(function(index, element) {
						html = html
						+ '<tr><td>'
						+ element.id
						+ '</td><td><i class="'+element.icon+'"></i></td><td>'
						+ element.node
						+ '</td><td>'
						+ element.path
						+ '</td><td><a onclick="delNode(this)" id="'+element.id+'" class="btn btn-sm btn-danger btn-rounded">删除</a></td></tr>';
					});
				} else {
					html = html+ '<tr id="noMoreNodes"><td colspan="5">该节点暂无子节点</td></tr>';
				}
			$('#addChildNode').attr('data',id);
			$('#childTable').html(html);
			$('#childTable').addClass('animated fadeIn');
			},
			error:function(){
				toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
			}
		})
	}
	/* 删除一个节点 */
    function delNode(obj){
		var tr = $(obj).parent().parent();
		var id = $(obj).attr('id');
		new $.flavr({ 
			content : '删除前请确保对应子节点已删除',
            dialog : 'confirm', 
            onConfirm : function(){ 
            	$.ajax({
    				url:'<%=basePath%>Node/delNode',
    				data:{'id':id},
    				type:'POST',
    				dataType:'json',
    				success:function(data){
    					if (data.code=='200'){
    						toastr.success(data.message,'成功');
    						tr.addClass('animated fadeOutRightBig');
    						setTimeout(function(){
    							tr.remove();
    						}, 400);
    					}else{
    						toastr.error(data.message,'操作失败');
    					}
    				},
    				error:function(){
    					toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
    				}
    			});
            }, 
            onCancel : function(){
            	toastr.warning('已取消操作','已取消');
            } 
        });
    }
	/* 添加节点取消按钮 */
	function cancel(obj){
		var tr = $(obj).parent().parent();
		$(tr).fadeOut();
	}
	/* 添加节点保存按钮	 */
	function save(obj){
		var tr = $(obj).parent().parent();
		var icon = $(tr).find('td:nth-child(2) input').val();
		var nodeName = $(tr).find('td:nth-child(3) input').val();
		var nodePath = $(tr).find('td:nth-child(4) input').val()
		if (nodeName==null||nodeName==''){
			toastr.error('请填写对应"节点名称"','错误');
			return null;
		}
		var isCheck = $(tr).find('td:nth-child(1)').children().children().children().is(':checked');
		if (!isCheck){
			if (nodePath==null||nodePath==''){
				toastr.error('请填写对应"节点路径"','错误');
				return null;
			}
		}
		$.ajax({
			url:'<%=basePath%>Node/addNode',
			data:{'nodeName':nodeName,'nodePath':nodePath,'icon':icon,'isCheck':isCheck,'parentId':0},
			type:'POST',
			dataType:'json',
			success:function(data){
				if (data.code=='200'){
					toastr.success(data.message,'成功');
					tr.remove();
					$('#fatherTable').append('<tr><td style="width: 10%">'+data.data.id+'</td><td style="width: 10%"><i class="'+data.data.icon+'"></i></td><td style="width: 30%">'+data.data.node+'</td><td style="width: 30%">'+data.data.path+'</td><td style="width: 20%"><a id="'+data.data.id+'" onclick="delNode(this)" class="btn btn-sm btn-danger btn-rounded">删除</a><a id="'+data.data.id+'" onclick="showChild(this)" class="btn btn-sm btn-success btn-rounded">显示子节点</a></td></tr>')
				}else{
					toastr.error(data.message,'失败');
				}
			},
			error:function(){
				toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
			}
		});
	}
	/* 添加子节点保存按钮	 */
	function saveChlid(obj){
		var tr = $(obj).parent().parent();
		var parentId = $(obj).attr('id');
		var icon = $(tr).find('td:nth-child(2) input').val();
		var nodeName = $(tr).find('td:nth-child(3) input').val();
		var nodePath = $(tr).find('td:nth-child(4) input').val()
		if (nodeName==null||nodeName==''){
			toastr.error('请填写对应"节点名称"','错误');
			return null;
		}
		if (nodePath==null||nodePath==''){
			toastr.error('请填写对应"节点路径"','错误');
			return null;
		}
		$.ajax({
			url:'<%=basePath%>Node/addNode',
			data:{'nodeName':nodeName,'nodePath':nodePath,'icon':icon,'isCheck':false,'parentId':parentId},
			type:'POST',
			dataType:'json',
			success:function(data){
				if (data.code=='200'){
					toastr.success(data.message,'成功');
					tr.remove();
					$('#childTable').append('<tr><td>'+data.data.id+'</td><td><i class="'+data.data.icon+'"></i></td><td>'+data.data.node+'</td><td>'+data.data.path+'</td><td><a id="'+data.data.id+'" onclick="delNode(this)" class="btn btn-sm btn-danger btn-rounded">删除</a></td></tr>');
				}else{
					toastr.error(data.message,'失败');
				}
			},
			error:function(){
				toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
			}
		});
	}
	/* 添加父节点按钮 */
	$('#addFatherNode').click(function() {
		$('#fatherTable').append('<tr><td><div class="checkbox"><label><input type="checkbox">是否存在子节点</label></div></td><td><input class="form-control"></input></td><td><input class="form-control" style="width:100%"></input></td><td><input class="form-control" style="width:100%"></td><td><a onclick="save(this)" class="btn btn-sm btn-success btn-rounded">保存</a><a onclick="cancel(this)" class="btn btn-sm btn-warning btn-rounded">取消</a></td></tr>');
	});
	/* 添加子节点按钮 */
	$('#addChildNode').click(function(){
		var parentId = $('#addChildNode').attr('data');
		$('#noMoreNodes').remove();
		if (parentId==null||parentId==''){
			toastr.warning('请先选择一个父节点','警告');
			return null;
		}
		$('#childTable').append('<tr><td>'+parentId+'</td><td><input class="form-control"></input></td><td><input class="form-control" style="width:100%"></input></td><td><input class="form-control" style="width:100%"></td><td><a id="'+parentId+'" onclick="saveChlid(this)" class="btn btn-sm btn-success btn-rounded">保存</a><a onclick="cancel(this)" class="btn btn-sm btn-warning btn-rounded">取消</a></td></tr>');
	})
</script>

